<template>
	<view class="container">	
		<!-- 商品兑换 -->
		<view  class="content-grow">
			<scroll-view  class="list-scroll-content"   scroll-y @scrolltolower="loadData"	>
				<view v-for="(item, index) in coinGoods" :key="index" class="product-item" @click="toShopDetail(item.id)" >
				<view>
					<image class="product-item-image" :src="item.pics[0]" mode="aspectFill"></image>
				</view>
				<view class="product-price-title">
					<text class="first">{{item.title}}</text>
				</view>		
				<view class="product-tag">
					<view class="product-tag-first">
						<text style="font-size: 30rpx;font-weight: 600">{{item.score}}</text>
						<text style="font-size: 26rpx;margin-left: 10rpx;">积分</text>
					</view>
					<view v-if="userScore>=item.score" class="score_can">去兑换</view>
					<view v-else class="score_no">积分不足</view>
				</view>
				
				</view>
			<view style="display: flex;align-items: center;justify-content: center;width: 100%;">
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
			</scroll-view>
		</view>
	</view>
</template>
<!-- 自定义一些组件测试 -->
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import Api from '@/common/api';
	import { mapState } from 'vuex';  
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				page: 1,
				size: 8,
				more_data: true,
				loaded:false,
				loadingType: '',
				coinGoods:[],
				shop_id:0,
				userScore:0
			}
		},

		onLoad(option) {
			uni.setNavigationBarTitle({
				title:option.name
			})
			if(this.hasLogin){
				this.userCenter();
			}
			this.shop_id=option.id;
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin']),
		},
		beforeCreate() {

		},
		beforeDestroy() {


		},
		onReachBottom(){
			this.loadData()
		},

		methods: {
			async userCenter(){
				let data = await Api.apiCall('get', Api.apiName.user_main, {},true);
				if (!data) { //出错时
					this.loadingType = 'noMore'
					return;
				}
				this.userScore=data.data.score;
			},
			// 积分商品列表
			async loadData(){
				if (!this.more_data) {
					return; //没有数据不请求
				}				
				
				let params={
						shop_id:this.shop_id,
						page:this.page,
						size:this.size
					};
				let data = await Api.apiCall('get', Api.apiName.score_goods_list, params);
				if (!data) { //出错时
					this.loadingType = 'noMore'
					return;
				}
				setTimeout(() => {
				
					this.coinGoods = this.coinGoods.concat(data.data)
					// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size) {
						this.page++;
					} else {
						this.more_data = false;
				
					}
				
				}, 600);
			},
			toDetail(id){
				uni.navigateTo({
					url:'/pages/benefit/detail?id='+id
				})
			},
		
		},


	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	.container {
		display: flex;
		flex-direction: column;
	}
	.coin{
		border-radius: 20rpx 20rpx 0 0;
		background: rgba(255,255,255,0.75);
		display: flex;
		margin: 30rpx 30rpx 0rpx 30rpx;
		align-items: center;
	}
	.coin-tit{
		flex: 1;
		padding: 30rpx 50rpx;
	}
	.coin-n{
		color: #0191FF;
		margin-left: 20rpx;
		font-weight: 600;
	}
	.font-w-600{
		font-weight: 600;
	}
	.coin-b{
		padding: 10rpx 30rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 20rpx;
		font-size: 24rpx;
		color: #0191FF;
	}
	.margin-15{
		border-radius: 20rpx;
		margin-top: -6px;
		background: #FFF
	}
	.border-r-10{
		border-radius: 10rpx;
	}

	.list-scroll-content{
		// height: 800rpx;
		height: 100%;
	}
	.content-grow{
		padding: 20rpx;
		height: 100%;
		.product-item{
			// height: 615rpx;
			width:335rpx;
			float: left;
			margin: 12rpx 10rpx;
			background: #ffffff;
			border-radius: 16rpx;
		
		}
		.product-item-title{
			padding: 14rpx 16rpx;
		}
		.product-item-title-first{
			width: 108rpx;
			height: 36rpx;
			font-size: 36rpx;
			line-height: 36rpx;
			
			font-weight: 800;
		}
		.product-tag{
			padding: 0rpx 20rpx;
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			.product-tag-first{
				    font-size: 26rpx;
				    color: #ED703B;
					flex:1;
					padding: 10rpx 0rpx;
			}
			
		}
		.product-item-image{
			width: 100%;
			height: 334rpx;
			border-radius: 20rpx;
		}
		.product-price-title{
			padding: 4rpx 20rpx;
			.first{
				    display: inherit;
					overflow: hidden;
					font-size: 26rpx;
					font-weight: 600;
					text-overflow: ellipsis;
					white-space: nowrap;
			}
		}
	}
	.coin_content{
		height: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
	}
	
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;
		flex-direction: column;
		
		.list-main{
			display: flex;
			flex-direction: column;
		}
		.big_image{
			width: 100%;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: 360rpx;
		}
		.small-image{
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}
	}
	.second{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 12rpx 20rpx;
	}
	.left_1{
		padding: 20rpx;
		flex: 1;
	}
	.left_2{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.sq-name{
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.benifit-name{
		font-size: 26rpx;
		font-weight: 600;
		margin-top: 10rpx;
	}
	.zc-coin{
		font-size: 28rpx;
		padding: 20rpx 20rpx;
		background: #6CB15E;
		border-radius: 10rpx;
		width: 170rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.offline{
		font-size: 30rpx;
		font-weight: 800;
		border-bottom: 1px solid #666666;
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid #000000;
	}
	.mybenefitbtn{
		padding: 10rpx 20rpx;
		border:1px solid #999999;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-weight: 800;
	}
	.score_can{
		font-size: 24rpx;
		background: #ED703B; 
		padding: 14rpx 30rpx; 
		border-radius: 30rpx; 
		color: #FFFFFF;
	}
	.score_no{
		font-size: 24rpx;
		background: #C89883;
		padding: 14rpx 30rpx;
		border-radius: 30rpx;
		color:#EED5CB
	}
</style>